import React, { Component } from 'react'
import {
  getIndex,
  genderList,
  yesOrNoList,
  maritalList,
  regionList,
  inOrgList,
  healthsList,
  nationList,
  educationList,
  FamilyRelationList
} from '../../utils/constant'
import { getCurrentInstance } from '@tarojs/taro'
import moment from 'moment';
import { View, Picker, Image } from '@tarojs/components'
import Banner from '../../containers/Banner'
import { AtInput, AtButton, AtList, AtListItem, AtIcon, AtDivider, AtImagePicker  } from 'taro-ui'
import { uploadImage } from '../../api/common'
import { getEmployeeById, getNativePlaces, updateMainInfo, deleteEducationInfo, deleteSocietyInfo, deleteFamilyInfo, deleteInOrgInfo } from '../../api/user'
import './index.scss'

class Page extends Component {

  constructor (props) {
    super(props);
    this.state = {
      encodeOid: '',
      oid: '',
      educationFloat: true,
      info: {},
      form: {},
      photoUrl:[],
      idcardImgs:[],
      nativePlace: [],
      nativeChildPlace: [],
      nativePlaceValue: [0,0]
    }
  }

  componentWillMount () { }

  componentDidMount () {
    this.init();
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
  }


  componentWillUnmount () { }

  init = () =>{
    const { oid } = getCurrentInstance().router.params;
    Taro.showLoading({ title: '加载中' })
    getEmployeeById(decodeURIComponent(oid)).then((res) => {
      Taro.hideLoading();
      let { beginworkdate, ...data } = res.data;
      beginworkdate = beginworkdate ? moment(beginworkdate).format('YYYY-MM-DD') : '';
      this.setState({ encodeOid: oid, info: res.data, form: { beginworkdate: beginworkdate,...data}, oid: res.data.oid,
        photoUrl:res.data.photoUrl ? [{url:res.data.photoUrl}] : [],
        idcardImgs:res.data.idcardImgs ? res.data.idcardImgs.map((item)=>({url:item})) :[],
        oldSalaryRecordUrl:res.data.oldSalaryRecordUrl ? res.data.oldSalaryRecordUrl.map((item)=>({url:item})) :[],
        dimissionUrl:res.data.dimissionUrl ? [{url:res.data.dimissionUrl}] : [],
        graduationUrl:res.data.graduationUrl ? [{url:res.data.graduationUrl}] : [],
        degreeUrl:res.data.degreeUrl ? [{url:res.data.degreeUrl}] : [],
      });
    });
    getNativePlaces().then(res => {
      res.data.forEach(item => {
        if (!item.children){
          item.children = [];
        }
      });
      this.setState({nativePlace: res.data});
    })
  };

  setNativeChildPlace = (e) => {
    if (e.detail.column === 0){
      let { nativePlace } = this.state;
      this.setState({nativeChildPlace: nativePlace[e.detail.value].children, nativePlaceValue: [e.detail.value,0]});
    }
  };

  nativePlaceChange = (e) => {
    let { nativePlace, form } = this.state;
    let newData = {...form};
    let index = e.detail.value;
    newData['nativeplaceProvince'] = nativePlace[index[0]].value;
    if (nativePlace[index[0]].children.length > 0){
      newData['nativeplace'] = nativePlace[index[0]].children[index[1]].value;
    }else {
      newData['nativeplace'] = nativePlace[index[0]].value;
    }
    this.setState({form: newData});
  };

  showNativePlace = (value) =>{
    let { nativePlace } = this.state;
    for (let i=0; i<nativePlace.length; i++){
      if (nativePlace[i].value == value){
        return nativePlace[i].title;
      }
      if (nativePlace[i].children.length>0){
        for (let a=0; a<nativePlace[i].children.length; a++){
          if (nativePlace[i].children[a].value == value){
            return nativePlace[i].title + nativePlace[i].children[a].title;
          }
        }
      }
    }
  };

  handlePickerChange = (e, name, list) => {
    const value = list[e.detail.value].value;
    const { form } = this.state;
    let newData = {...form};
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };

  handleInputChange = (value, name) => {
    const { form } = this.state;
    let newData = form;
    newData[name] = value;
    this.setState({
      form: newData
    });
    return value
  };

  handleDatePickerChange = (e, name) => {
    let { form } = this.state
    let newData = { ...form }
    newData[name] = e.detail.value
    this.setState({
      form: newData
    })
    return e.detail.value
  }

  onImageClick (index, file) {
    Taro.previewImage({
      current: file.url, // 当前显示图片的http链接
      urls: [file.url] // 需要预览的图片http链接列表
    })
  }

  handleUploadChange (files, operationType, index, name) {
    if(operationType==='add') {
      if(files && files.length>0) {
        Taro.showLoading({ title: '加载中' })
        uploadImage(files[files.length-1]).then((res) => {
          Taro.hideLoading()
          this.setState({ [name]:[...this.state[name],{url:res}] })
        })
      }
    }
    else if(operationType==='remove') {
      this.setState({ [name]:files })
    }
  }

  goEduction = (e,type,data) => {
    if(e.target&&e.target.matches('.portal__listBox-note-icon')){
      return;
    }
    let { encodeOid, oid } = this.state;
    let params = 'OperationType=' + type + '&oid=' + oid +'&encodeOid='+ encodeOid;
    params += data ? '&data=' + JSON.stringify(data) : '';
    this.handleSave()
    Taro.redirectTo({ url: '/pages/education/index?' + params })
  };

  delEduction = (item) => {
    let self = this;
    let { form } = this.state;
    if (form.employeeEducation.length <= 1){
      Taro.showToast({
        title: `此列表数据至少存在一条，若要修改内容可以单击列表项进行修改`,
        icon: 'none',
        duration: 1000
      });
      return;
    }
    deleteEducationInfo(item.oid).then(res =>{
      self.init();
    });
  };

  goSociety = (e, type, data) => {
    if(e.target&&e.target.matches('.portal__listBox-note-icon')){
      return;
    }
    let { encodeOid, oid } = this.state;
    let params = 'OperationType=' + type + '&oid=' + oid +'&encodeOid='+ encodeOid;
    params += data ? '&data=' + JSON.stringify(data) : '';
    this.handleSave()
    Taro.redirectTo({ url: '/pages/society/index?' + params })
  };

  delSociety = (item) => {
    let self = this;
    let { form } = this.state;
    if (form.employeeSociety.length <= 1){
      Taro.showToast({
        title: `此列表数据至少存在一条，若要修改内容可以单击列表项进行修改`,
        icon: 'none',
        duration: 1000
      });
      return;
    }
    deleteSocietyInfo(item.oid).then(res =>{
      self.init();
    });
  };

  goFamily = (e, type, data) => {
    if(e.target&&e.target.matches('.portal__listBox-note-icon')){
      return;
    }
    let { encodeOid, oid } = this.state;
    let params = 'OperationType=' + type + '&oid=' + oid +'&encodeOid='+ encodeOid;
    params += data ? '&data=' + JSON.stringify(data) : '';
    this.handleSave()
    Taro.redirectTo({ url: '/pages/family/index?' + params })
  };

  delFamily = (item) => {
    let self = this;
    let { form } = this.state;
    if (form.familyMember.length <= 1){
      Taro.showToast({
        title: `此列表数据至少存在一条，若要修改内容可以单击列表项进行修改`,
        icon: 'none',
        duration: 1000
      });
      return;
    }
    deleteFamilyInfo(item.oid).then(res =>{
      self.init();
    });
  };

  goInOrg = (e, type, data) => {
    if(e.target&&e.target.matches('.portal__listBox-note-icon')){
      return;
    }
    let { encodeOid, oid } = this.state;
    let params = 'OperationType=' + type + '&oid=' + oid +'&encodeOid='+ encodeOid;
    params += data ? '&data=' + JSON.stringify(data) : '';
    this.handleSave()
    Taro.redirectTo({ url: '/pages/inOrg/index?' + params })
  };

  delInOrg = (item) => {
    let self = this;
    deleteInOrgInfo(item.id).then(res =>{
      self.init();
    });
  };

  handleSubmit = () => {
    const { photoUrl, idcardImgs, oldSalaryRecordUrl, dimissionUrl, graduationUrl, degreeUrl } = this.state;
    let { form } = this.state;
    if (!this.checkSubmitData(form)){
      return;
    }
    if (form.disbandment==='2'){
      form.veteranNum = '';
    }
    updateMainInfo({...form,
      photoUrl: photoUrl[0].url,
      idcardImgs:idcardImgs.map((item)=>item.url),
      oldSalaryRecordUrl:oldSalaryRecordUrl.map((item)=>item.url),
      dimissionUrl: dimissionUrl.length>0 ?dimissionUrl[0].url : '',
      graduationUrl: graduationUrl[0].url,
      degreeUrl: degreeUrl.length>0 ? degreeUrl[0].url : '',
      isMemberDone:1
    }).then(() => {
      Taro.showToast({
        title: `更新成功`,
        icon: 'success',
        duration: 2000
      })
    })
  };

  handleSave= () => {
    const { photoUrl, idcardImgs, oldSalaryRecordUrl, dimissionUrl, graduationUrl, degreeUrl } = this.state;
    const { form } = this.state;
    updateMainInfo({...form,
      photoUrl: photoUrl[0]?.url,
      idcardImgs:idcardImgs.map((item)=>item.url),
      oldSalaryRecordUrl:oldSalaryRecordUrl.map((item)=>item?.url),
      dimissionUrl: dimissionUrl[0]?.url,
      graduationUrl: graduationUrl[0]?.url,
      degreeUrl: degreeUrl[0]?.url,
    }).then(() => {

    })
  };

  checkSubmitData = (form) => {
    const phoneFormat = /^1[3456789]\d{9}$/;
    const format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
    const { photoUrl, idcardImgs, oldSalaryRecordUrl, dimissionUrl, graduationUrl, degreeUrl } = this.state;
    if (!form.gender){
      Taro.showToast({title: `请填写性别`, icon: 'none', duration: 1000});
      return false;
    }else if (!format.test(form.idcard)){
      Taro.showToast({title: `身份证号码格式错误`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.nation){
      Taro.showToast({title: `请填写民族`, icon: 'none', duration: 1000});
      return false;
    }else if (!phoneFormat.test(form.mobile)){
      Taro.showToast({title: `手机号格式错误`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.nativeplace){
      Taro.showToast({title: `请填写籍贯`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.nationality){
      Taro.showToast({title: `请填写国籍`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.regresidence){
      Taro.showToast({title: `请填写户口所在地`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.address){
      Taro.showToast({title: `请填写家庭住址`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.healthstatus){
      Taro.showToast({title: `请填写健康状态`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.disbandment){
      Taro.showToast({title: `请填写是否是退伍军人`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.marital){
      Taro.showToast({title: `请填写婚姻状态`, icon: 'none', duration: 1000});
      return false;
    }else if (!form.beginworkdate){
      Taro.showToast({title: `请填写参加工作时间`, icon: 'none', duration: 1000});
      return false;
    } else if (form.employeeEducation.length < 1){
      Taro.showToast({title: `请填写教育经历`, icon: 'none', duration: 1000});
      return false;
    }else if (form.employeeSociety.length < 1){
      Taro.showToast({title: `请填写工作经历`, icon: 'none', duration: 1000});
      return false;
    }else if (form.familyMember.length < 1){
      Taro.showToast({title: `请填写家庭成员信息`, icon: 'none', duration: 1000});
      return false;
    }else if (!photoUrl || photoUrl.length < 1){
      Taro.showToast({title: `请先上传一寸照片`, icon: 'none', duration: 1000});
      return false;
    }else if (!idcardImgs || idcardImgs.length < 1){
      Taro.showToast({title: `请先上传身份证照片`, icon: 'none', duration: 1000});
      return false;
    }else if (!graduationUrl || graduationUrl.length < 1){
      Taro.showToast({title: `请先上传毕业证照片`, icon: 'none', duration: 1000});
      return false;
    }else {
      if (form.disbandment==='1' && !form.veteranNum){
        Taro.showToast({title: `请填写退伍证编号`, icon: 'none', duration: 1000});
        return false;
      }
      return true;
    }
  };

  render () {
    const { info, photoUrl, idcardImgs, oldSalaryRecordUrl, dimissionUrl, graduationUrl, degreeUrl } = this.state
    return (
      <View className='portal'>
        <Banner/>
        <View className='portal__info'>
          <View className='portal__info-label'>姓名：</View>
          <View className='portal__info-value'>{info.name}</View>
        </View>
        <View className='portal__info'>
          <View className='portal__info-label'>入职公司：</View>
          <View className='portal__info-value'>{info.orgname}</View>
        </View>
        <View className='portal__info'>
          <View className='portal__info-label'>入职部门：</View>
          <View className='portal__info-value'>{info.unitname}</View>
        </View>
        <View className='portal__info'>
          <View className='portal__info-label'>职位：</View>
          <View className='portal__info-value'>{info.jobname}</View>
        </View>
        <AtDivider content='请填写以下信息' fontColor='#50C77A'/>
        <View>
          <View className='portal__form'>
            <View className='portal__form-label'>性别<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={genderList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'gender', genderList)}>
              {
                this.state.form.gender
                  ? <View className='portal__form-picker-value'>{genderList[getIndex(genderList,this.state.form.gender)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>
          <View className='portal__form'>
            <View className='portal__form-label'>身份证号<View className='required'>*</View></View>
            <AtInput
              required
              type='idcard'
              placeholder='请填写完整身份证号码'
              value={this.state.form.idcard}
              onChange={(e) => this.handleInputChange(e, 'idcard')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>民族<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={nationList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'nation', nationList)}>
              {
                this.state.form.nation
                  ? <View className='portal__form-picker-value'>{nationList[getIndex(nationList,this.state.form.nation)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>手机<View className='required'>*</View></View>
            <AtInput
              type='phone'
              maxlength={11}
              placeholder='请填写'
              value={this.state.form.mobile}
              onChange={(e) => this.handleInputChange(e, 'mobile')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>其他联系方式</View>
            <AtInput
              type='phone'
              maxlength={11}
              placeholder='请填写'
              value={this.state.form.contact}
              onChange={(e) => this.handleInputChange(e, 'contact')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>国籍<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={regionList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'nationality', regionList)}>
              {
                this.state.form.nationality
                  ? <View className='portal__form-picker-value'>{regionList[getIndex(regionList,this.state.form.nationality)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>政治面貌</View>
            <Picker className='portal__form-picker' mode='selector' range={inOrgList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'polity', inOrgList)}>
              {
                this.state.form.polity
                  ? <View className='portal__form-picker-value'>{inOrgList[getIndex(inOrgList,this.state.form.polity)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>籍贯<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='multiSelector' range={[this.state.nativePlace,this.state.nativeChildPlace]} rangeKey='title'
                    value={this.state.nativePlaceValue} onColumnChange={(e) =>this.setNativeChildPlace(e)}
            onChange={(e) => this.nativePlaceChange(e)}>
              {
                this.state.form.nativeplace
                  ? <View className='portal__form-picker-value'>{this.showNativePlace(this.state.form.nativeplace)}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>户口所在地<View className='required'>*</View></View>
            <AtInput
              type='text'
              placeholder='请填写'
              value={this.state.form.regresidence}
              onChange={(e) => this.handleInputChange(e, 'regresidence')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>家庭住址<View className='required'>*</View></View>
            <AtInput
              type='text'
              placeholder='请填写'
              value={this.state.form.address}
              onChange={(e) => this.handleInputChange(e, 'address')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>健康状态<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={healthsList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'healthstatus', healthsList)}>
              {
                this.state.form.healthstatus
                  ? <View className='portal__form-picker-value'>{healthsList[getIndex(healthsList,this.state.form.healthstatus)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>是否退伍军人<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={yesOrNoList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'disbandment', yesOrNoList)}>
              {
                this.state.form.disbandment
                  ? <View
                    className='portal__form-picker-value'>{yesOrNoList[getIndex(yesOrNoList,this.state.form.disbandment)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form' style={{display: this.state.form.disbandment==='1'?'block':'none'}}>
            <View className='portal__form-label'>退伍证编号<View className='required'>*</View></View>
            <AtInput
              type='text'
              placeholder='请填写退伍证编号'
              value={this.state.form.veteranNum}
              onChange={(e) => this.handleInputChange(e, 'veteranNum')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>是否结婚<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='selector' range={maritalList} rangeKey='label'
                    onChange={(e) => this.handlePickerChange(e, 'marital', maritalList)}>
              {
                this.state.form.marital
                  ? <View className='portal__form-picker-value'>{maritalList[getIndex(maritalList,this.state.form.marital)]?.label}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>参加工作时间<View className='required'>*</View></View>
            <Picker className='portal__form-picker' mode='date' rangeKey='label'
                    onChange={(e) => this.handleDatePickerChange(e, 'beginworkdate')}>
              {
                this.state.form.beginworkdate
                  ? <View className='portal__form-picker-value'>{this.state.form.beginworkdate}</View>
                  : <View className='portal__form-picker-placeholder'>请选择</View>
              }
            </Picker>
          </View>

          <View className='portal__form'>
            <View className='portal__form-list-header'>
              <View className='portal__form-label'>教育信息<View className='required'>*</View></View>
              <View className='at-icon at-icon-add-circle' onClick={(e) => this.goEduction(e,'add')}/>
            </View>
            <View className='portal__form-list-body'>
              <AtList>
                {
                  this.state.form.employeeEducation ?
                    this.state.form.employeeEducation.map((item) => {
                      return <View className='portal__listBox' onClick={(e) => this.goEduction(e,'update',item)}>
                        <View className='portal__listBox-content'>
                          <View>{item.school ? item.school : ''}</View>
                          <View className='portal__listBox-content-date'>
                            {`${item.schooldate ? moment(item.schooldate).format('YYYY-MM') : ''} - ${item.graduatedate ? moment(item.graduatedate).format('YYYY-MM') : ''}`}
                          </View>
                        </View>
                        <View className='portal__listBox-note'>
                          <View className='portal__listBox-note-detail'>
                            {item.grade ? educationList[getIndex(educationList,item.grade)]?.label : ''}
                          </View>
                          <AtIcon className='portal__listBox-note-icon' value='trash' size='40' onClick={() => this.delEduction(item)} />
                        </View>
                      </View>
                    }) : ''
                }
              </AtList>
            </View>
          </View>

          <View className='portal__form'>
            <View className='portal__form-list-header'>
              <View className='portal__form-label'>工作经历<View className='required'>*</View></View>
              <View className='at-icon at-icon-add-circle' onClick={(e) => this.goSociety(e,'add',null)}/>
            </View>
            <View className='portal__form-list-body'>
              <AtList>
                {
                  this.state.form.employeeSociety ?
                    this.state.form.employeeSociety.map((item) => {
                      return <View className='portal__listBox' onClick={(e) => this.goSociety(e,'update',item)}>
                        <View className='portal__listBox-content'>
                          <View>{item.company ? item.company : ''}</View>
                          <View className='portal__listBox-content-date'>
                            {`${item.begindate ? moment(item.begindate).format('YYYY-MM') : ''} - ${item.enddate ? moment(item.enddate).format('YYYY-MM') : ''}`}
                          </View>
                        </View>
                        <View className='portal__listBox-note'>
                          <View className='portal__listBox-note-detail'>
                            {item.responsibility ? item.responsibility : ''}
                          </View>
                          <AtIcon className='portal__listBox-note-icon' value='trash' size='40' onClick={() => this.delSociety(item)} />
                        </View>
                      </View>
                    }) : ''
                }
              </AtList>
            </View>
          </View>

          <View className='portal__form'>
            <View className='portal__form-list-header'>
              <View className='portal__form-label'>行政党派信息</View>
              <View className='at-icon at-icon-add-circle' onClick={(e) => this.goInOrg(e,'add')}/>
            </View>
            <View className='portal__form-list-body'>
              <AtList>
                {
                  this.state.form.employeeInorgname ?
                    this.state.form.employeeInorgname.map((item) => {
                      return <View className='portal__listBox' onClick={(e) => this.goInOrg(e,'update',item)}>
                        <View className='portal__listBox-content'>
                          <View>{item.polity ? inOrgList[getIndex(inOrgList,item.polity)]?.label : ''}</View>
                          <View className='portal__listBox-content-date'>
                            {`${item.joinDay ? moment(item.joinDay).format('YYYY-MM') : ''}`}
                          </View>
                        </View>
                        <View className='portal__listBox-note'>
                          <View className='portal__listBox-note-detail'>
                            {item.inorgname ? item.inorgname : ''}
                          </View>
                          <AtIcon className='portal__listBox-note-icon' value='trash' size='40' onClick={() => this.delInOrg(item)} />
                        </View>
                      </View>
                    }) : ''
                }
              </AtList>
            </View>
          </View>

          <View className='portal__form'>
            <View className='portal__form-list-header'>
              <View className='portal__form-label'>家庭成员<View className='required'>*</View></View>
              <View className='at-icon at-icon-add-circle' onClick={(e) => this.goFamily(e,'add')}/>
            </View>
            <View className='portal__form-list-body'>
              <AtList>
                {
                  this.state.form.familyMember ?
                    this.state.form.familyMember.map((item) => {
                      return <View className='portal__listBox' onClick={(e) => this.goFamily(e,'update',item)}>
                        <View className='portal__listBox-content'>
                          <View>{item.name ? item.name : ''}</View>
                          <View className='portal__listBox-content-date'>{item.phone}</View>
                        </View>
                        <View className='portal__listBox-note'>
                          <View className='portal__listBox-note-detail'>{item.relation ? FamilyRelationList[getIndex(FamilyRelationList,item.relation)]?.label : ''}</View>
                          <AtIcon className='portal__listBox-note-icon' value='trash' size='40' onClick={() => this.delFamily(item)} />
                        </View>
                      </View>
                    }) : ''
                }
              </AtList>
            </View>
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>个人一寸照片<View className='required'>*</View></View>
            <AtImagePicker
              showAddBtn={photoUrl && photoUrl.length<1}
              files={photoUrl}
              onImageClick={this.onImageClick.bind(this)}
              onChange={(files, operationType, index)=>this.handleUploadChange(files, operationType, index, 'photoUrl')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>身份证正反面照片<View className='required'>*</View></View>
            <AtImagePicker
              showAddBtn={idcardImgs  && idcardImgs.length<2}
              files={idcardImgs }
              onImageClick={this.onImageClick.bind(this)}
              onChange={(files, operationType, index)=>this.handleUploadChange(files, operationType, index, 'idcardImgs')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>银行流水/薪资证明</View>
            <AtImagePicker
              showAddBtn={oldSalaryRecordUrl && oldSalaryRecordUrl.length<2}
              files={oldSalaryRecordUrl}
              onImageClick={this.onImageClick.bind(this)}
              onChange={(files, operationType, index)=>this.handleUploadChange(files, operationType, index, 'oldSalaryRecordUrl')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>离职证明</View>
            <AtImagePicker
              showAddBtn={dimissionUrl && dimissionUrl.length<1}
              files={dimissionUrl}
              onImageClick={this.onImageClick.bind(this)}
              onChange={(files, operationType, index)=>this.handleUploadChange(files, operationType, index, 'dimissionUrl')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>毕业证<View className='required'>*</View></View>
            <AtImagePicker
              showAddBtn={graduationUrl  && graduationUrl.length<1}
              files={graduationUrl}
              onImageClick={this.onImageClick.bind(this)}
              onChange={(files, operationType, index)=>this.handleUploadChange(files, operationType, index, 'graduationUrl')}
            />
          </View>

          <View className='portal__form'>
            <View className='portal__form-label'>学位证</View>
            <AtImagePicker
              showAddBtn={degreeUrl  && degreeUrl.length<1}
              files={degreeUrl}
              onImageClick={this.onImageClick.bind(this)}
              onChange={(files, operationType, index)=>this.handleUploadChange(files, operationType, index, 'degreeUrl')}
            />
          </View>

        </View>

        <View className='button_group'>
          <AtButton type='primary' onClick={this.handleSubmit}>提交</AtButton>
        </View>
      </View>
    )
  }
}

export default Page
